<template>
  <div class="out-box">
    <div class="content-ab">
      <scrollHandle>
        <div class="img-list">
          <scrollHandle>
            <el-image class="imgstyle" :src="about1" fit="cover" />
          </scrollHandle>
          <scrollHandle>
            <el-image class="imgstyle" :src="about2" fit="cover" />
          </scrollHandle>
          <scrollHandle>
            <el-image class="imgstyle" :src="about3" fit="cover" />
          </scrollHandle>
          <scrollHandle>
            <el-image class="imgstyle" :src="about4" fit="cover" />
          </scrollHandle>
        </div>
      </scrollHandle>
    </div>

    <scrollHandle>
      <div class="black-bg">
        <div class="black-line">
          <div class="left-en">#CREATOR</div>
          <div class="right-ch">创始人团队</div>
        </div>
      </div>
    </scrollHandle>


    <div class="content-ab">
      <scrollHandle>
        <div class="porsen-content">
          <div class="porsen-img">
            <el-image class="imgstyle" :src="about5" fit="cover" />
          </div>
          <div class="right-msg">
            <div>
              <div class="msg-name">赵磊</div>
              <div class="msg-mid" style="margin-top: 45px">
                Light-里特创意创始人兼设计总监<br />
                山东工艺美院&济南大学客座教授<br />
                曾任职4A公司-正邦，2009年至今，共主导与参与大中型企业项目660余个
              </div>
            </div>

            <div>
              <div class="lit-tit">服务过的品牌：</div>
              <div class="base-cont">
                【传媒行业】CCTV、中国移动、上海百事通、黑龙江卫视<br />
                【集团政府】中粮集团、京沪高铁、用友集团、中国磷肥协会、山东高速<br />
                【医疗行业】北京军区总医院、北京协和医院、齐鲁制药、鲁抗医药<br />
                【汽车行业】红旗、北汽集团、长安福特、东风雪铁龙、五征汽车<br />
                【能源建设】中海油、中国能建、中国电建、辽能集团<br />
                【金融行业】浙江农信、北京金融街、宏信证券、齐鲁银行、铁岭银行<br />
                【地产行业】链家地产、康桥地产、华纺地产、诺德物业、永泰地产、万象城<br />
                【快消行业】上海百丽、东阿阿胶、得益乳业、中储粮、特步、橙子便利<br />
                【互联网IT】赶集网、猎聘网、美团、浪潮<br />
                【教育行业】欣加出国、大墨蒲公英、时悦少儿综合体、学宜佳
              </div>
            </div>
          </div>
        </div>
      </scrollHandle>
      <scrollHandle>
        <div class="porsen-content">
          <div class="porsen-img">
            <el-image class="imgstyle" :src="about6" fit="cover" />
          </div>
          <div class="right-msg">
            <div>
              <div class="msg-name">郭天鹏</div>
              <div class="msg-mid" style="margin-top: 45px">
                Light-里特创意创始人兼营销总监<br />
                17年广告行业从业经验，曾先后任职于上海奥美、阳狮、WE等多家4A公司
              </div>
            </div>

            <div>
              <div class="lit-tit">服务过的品牌：</div>
              <div class="base-cont">
                【汽车行业】上海大众、上汽通用、广汽本田、吉利汽车<br />
                【化妆品行业】高夫、六神、百雀羚、兰蔻、妮维雅、雅诗兰黛、倩碧、珈蓝<br />
                【金融行业】招商银行、渣打银行、平安银行、交通银行<br />
                【地产行业】仁恒地产、世茂集团、绿地集团<br />
                【快消行业】轩尼诗、青岛啤酒、芝华士、可口可乐、三得利、星巴克、肯德基<br />
                【家电行业】SONY、Bose、松下、老板电器、海尔<br />
                【日用品行业】新秀丽、苏泊尔、WMF、好孩子
              </div>
            </div>
          </div>
        </div>
      </scrollHandle>
      <scrollHandle>
        <div class="bottom-img">
          <el-image class="imgstyle" :src="about7" fit="cover" />
        </div>
      </scrollHandle>
    </div>
  </div>
</template>

<script>
import about1 from "@/assets/imgs/about1.jpg";
import about2 from "@/assets/imgs/about2.jpg";
import about3 from "@/assets/imgs/about3.jpg";
import about4 from "@/assets/imgs/about4.jpg";
import about5 from "@/assets/imgs/about5.jpg";
import about6 from "@/assets/imgs/about6.jpg";
import about7 from "@/assets/imgs/about7.jpg";

import scrollHandle from "@/components/scrollHandle.vue";
export default {
  components: {
    scrollHandle,
  },
  data() {
    return {
      about1,
      about2,
      about3,
      about4,
      about5,
      about6,
      about7,
      screenWidth: window.innerWidth,
      bannerImgList: "",
      baseApi: process.env.VUE_APP_IMGADDRESS,
      brandData: "",
    };
  },
  mounted() {
    window.addEventListener("resize", this.getScreenSise);
  },
  methods: {
    getScreenSise() {
      this.screenWidth = window.innerWidth;
    },
  },
};
</script>

<style lang="scss" scoped>
.out-box {
  background-color: #fff;
  width: 100%;
}

.content-ab {
  padding: 0 100px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.img-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
}

.black-bg {
  margin-top: 200px;
  width: 100%;
  background: #000;
}

.black-line {
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  height: 330px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  padding: 0 100px;
}

.left-en {
  font-size: 90px;
  font-family: "BebasFontEnB";
}

.right-ch {
  font-size: 70px;
  font-family: "BebasFont";
}

.porsen-content {
  padding-top: 150px;
  padding-bottom: 50px;
  width: 100%;
  display: grid;
  grid-template-columns: 600px 1fr;
}

.right-msg {
  padding-left: 122px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // background: #000;
}

.msg-name {
  font-size: 80px;
  line-height: 80px;
  font-family: "BebasFontB";
}

.msg-mid {
  font-size: 50px;
  line-height: 68px;
  font-family: "BebasFontB";
}

.lit-tit {
  font-size: 35px;
  padding-left: 6px;

}

.base-cont {
  margin-top: 27px;
  color: #434343;
  font-size: 27px;
  line-height: 40px;
}

.bottom-img {
  margin-top: 150px;
  width: 100%;
  padding-bottom: 100px;
}
</style>